
import { WingBlank, Flex, Toast } from 'antd-mobile'
import { imgBase }  from '../../utils'
import { Component } from 'react'
import { connect } from 'react-redux'
import {commonChangeWay} from '../../store/actions'
import styles from './brandPk.module.scss'
import { http, urls, defultImg } from '../../utils'
class BrandPk extends Component  {
  constructor(props) {
    super(props)
    this.state = {
      brandOneT: 0,
      brandTwoT: 0,
    }
  }
  async UNSAFE_componentWillMount() {
    const {pkInputOne, pkInputTwo, commonChangeWay} = this.props
    const one = await http.get(urls.thumbsShow, {objId: pkInputOne.id}, false);
    const two = await http.get(urls.thumbsShow, {objId: pkInputTwo.id}, false);
    this.setState({
      brandOneT: one.data,
      brandTwoT: two.data,
      oneType: false,
      twoType: false,
    })
  } 
  thumbsUp(id, type) {
    const {openId} = this.props
    http.post(urls.thumbsUp, {openId: openId, objId: id}, false).then((res) => {
      if (res.data === '点赞成功') {
        if (type === 1) {
          this.setState({
            brandOneT: this.state.brandOneT + 1,
            oneType: true
          })
        } else {
          this.setState({
            brandTwoT: this.state.brandTwoT + 1,
            twoType: true
          })
        }
      } else {
        Toast.info(res.data)
      }
    })
    
    
  }
  
  render() {
    const {pkInputOne, pkInputTwo} = this.props
    const isType = pkInputOne.theIndex === '1102' ? 'mci' : 'mbi'
    // const {brandOneT, brandTwoT, oneType, twoType} = this.state
    return (
      <div className={styles["dabule-brand-pk"]}>
        <WingBlank>
          <div className={styles["brand-logo-box"]}>
            <Flex justify="between">
              <img className={styles["logo-img"]} alt={pkInputOne.name} src={defultImg(pkInputOne.logoUrl, isType)}/>
              <img className={styles["vs-img"]} src={`${imgBase}/vs-icon.png`} />
              <img className={styles["logo-img"]} alt={pkInputTwo.name} src={defultImg(pkInputTwo.logoUrl, isType)}/>
            </Flex>
          </div>
          <Flex justify="between">
            <div className={styles["brand-box"]}>
              <h3>{pkInputOne.name}</h3>
              {/* <p onClick={() => this.thumbsUp(pkInputOne.id, 1)} className={oneType ? 'active': ''}>
                <img src={oneType ? `${imgBase}/muzi-icon.png` : `${imgBase}/muzia-icon.png`} />{brandOneT}
              </p> */}
            </div>
            <div className={styles["brand-box"]}>
              <h3>{pkInputTwo.name}</h3>
              {/* <p onClick={() => this.thumbsUp(pkInputTwo.id, 2)} className={twoType ? 'active': ''}>
                <img src={twoType ? `${imgBase}/muzi-icon.png` : `${imgBase}/muzia-icon.png`} />{brandTwoT}
              </p> */}
            </div>
          </Flex>
        </WingBlank>
      </div>
    ) 
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    commonChangeWay: (data) => dispatch(commonChangeWay(data))
  };
}

const mapStateToProps = (state, ownProps) => {
  return {
    pkInputOne: state.pkInputOne,
    pkInputTwo: state.pkInputTwo,
    openId: state.openId,
  };
};


export default connect(mapStateToProps, mapDispatchToProps)(BrandPk);